<template>
  <div class="Statements" chief-style-set>
    <Title title="应收应付对账单">
      <template #right>
        <div class="switch">
          <span :class="{choose:switchType == 1}" @click="switchClick(1)">应收</span>
          /
          <span :class="{choose:switchType == 2}" @click="switchClick(2)">应付</span>
        </div>
      </template>
    </Title>
    <div class="content-h-auto" chief-style-set>
      <pie-charts :pChartsOption="ChartsOption"></pie-charts>
    </div>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import pieCharts from "@/components/portalEcharts/PieEcharts";
import { rptVisPrjRecpayAccount } from "@/api/portalChief";
export default {
  name: "Statements",
  components: {
    Title, pieCharts
  },
  data () {
    return {
      switchType: 1,
      ChartsOption: {},
      OneRes: {},
      SecondRes: {}
    };
  },
  created () {
    rptVisPrjRecpayAccount(this.$store.state.user.project.projectNo).then(res => {
      this.disposeData(res);
      this.OneRes = res;
    });
    rptVisPrjRecpayAccount(this.$store.state.user.project.projectNo, 2).then(res => {
      this.SecondRes = res;
    });
  },
  methods: {
    disposeData (res) {
      this.ChartsOption = {};
      if (res.status === 200) {
        let data = res.data.data;
        if (Object.keys(data).length > 0) {
          let colorList = ["#FFCE3B", "#F59447", "#6F9BE4", "#4473C5"];
          let outputList = [];
          Object.keys(data).forEach((item, index) => {
            outputList.push({
              value: data[item]["金额"],
              name: item,
              color: colorList[index]
            });
          });
          this.ChartsOption = {
            radius: "65%",
            data: outputList
          };
        } else {
          this.ChartsOption = {};
        }
      }
    },

    switchClick (type) {
      if (this.switchType === type) { return; }
      this.switchType = type;
      if (type === 1) {
        this.disposeData(this.OneRes);
      } else if (type === 2) {
        this.disposeData(this.SecondRes);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.Statements{
  .switch{
    span{
      cursor: pointer;
      &.choose{
        .color();
        font-weight: bold;
      }
    }
  }
}
</style>